<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>

        .kuangjia{
            width: 400px ;
            height: 800px;
            border: 1px solid;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: column;
        }
        .shang{
            height: 80px;
            width: 100%;
            background-color: blueviolet;
        }
        .zhongjian{
            height: 670px;
            width: 100%;
        }
        .xia{
            height: 50px;
            width: 100%;
            background-color: black;
        }
        .a{
            display: flex;
            height: 60px;
            width: 100%;
            border-bottom: 1px solid gray;
        }
        .left{
            width: 70px;
            height: 60px;
            
            display: flex;
        }
        .center{
            width: 260px;
            height: 60px;
            
        }
        .right{
            width: 70px;
            height: 60px;
            
        }
        .tupian1{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin: auto;

        }
        .center{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .da{
            margin-left: 10px;
            font-family: 华文新魏;
        }
        .xiao{
            font-size: 0.7em;
            margin-left: 10px;
            margin-bottom: 9px;
            font-family: 宋体;
        }
        .right{
            display: flex;
            justify-content: end;
            align-items: end;
        }
        .shijian{
            font-size: 0.6em;
            margin-right: 5px;
            margin-bottom: 5px ;
        }
        .biaoti{
            margin-left: 50px;
            line-height: 60px;
            font-size: 1.6em;
        }
        .xia{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .dot{
            height: 30px;
            width: 30px;
            border: 1px solid white;
            background-color: aliceblue;
            border-radius: 50%;
        }
        .dot:nth-child(1){
            margin-left: 20px;
        }
        .dot:nth-child(3){
            margin-right: 20px ;
        }
    </style>
<body>
    <div class="kuangjia">

        <div class="shang">
            <span class="biaoti">Arin的Chat</span>
        </div>
        <div class="zhongjian">
            <div class="a">
                <div class="left">
                    <img src="055620DCA9C6DBF6117EBCBFF8DAF775.jpg" class="tupian1">
                </div>
                <div class="center">
                    <span class="da">喜多郁代</span><br>
                    <span class="xiao">第五人格，启动！</span>
                </div>
                <div class="right">
                    <span class="shijian">14:20</span>
                </div>
            </div>
            <div class="a">
                <div class="left">
                    <img src="055620DCA9C6DBF6117EBCBFF8DAF775.jpg" class="tupian1">
                </div>
                <div class="center">
                    <span class="da">喜多郁代</span><br>
                    <span class="xiao">第五人格，启动！</span>
                </div>
                <div class="right">
                    <span class="shijian">14:20</span>
                </div>
            </div>
            <div class="a">
                <div class="left">
                    <img src="055620DCA9C6DBF6117EBCBFF8DAF775.jpg" class="tupian1">
                </div>
                <div class="center">
                    <span class="da">喜多郁代</span><br>
                    <span class="xiao">原神，启动！</span>
                </div>
                <div class="right">
                    <span class="shijian">14:20</span>
                </div>
            </div>
            <div class="a">
                <div class="left">
                    <img src="055620DCA9C6DBF6117EBCBFF8DAF775.jpg" class="tupian1">
                </div>
                <div class="center">
                    <span class="da">喜多郁代</span><br>
                    <span class="xiao">原神，启动！</span>
                </div>
                <div class="right">
                    <span class="shijian">14:20</span>
                </div>
            </div>
            <div class="a">
                <div class="left">
                    <img src="055620DCA9C6DBF6117EBCBFF8DAF775.jpg" class="tupian1">
                </div>
                <div class="center">
                    <span class="da">喜多郁代</span><br>
                    <span class="xiao">你以后不准玩原神了</span>
                </div>
                <div class="right">
                    <span class="shijian">14:20</span>
                </div>
            </div>
            <div class="a">
                <div class="left">
                    <img src="055620DCA9C6DBF6117EBCBFF8DAF775.jpg" class="tupian1">
                </div>
                <div class="center">
                    <span class="da">喜多郁代</span><br>
                    <span class="xiao">你以后不准玩原神了</span>
                </div>
                <div class="right">
                    <span class="shijian">14:20</span>
                </div>
            </div>
            <div class="a">
                <div class="left">
                    <img src="055620DCA9C6DBF6117EBCBFF8DAF775.jpg" class="tupian1">
                </div>
                <div class="center">
                    <span class="da">喜多郁代</span><br>
                    <span class="xiao">哪里来的哥布林</span>
                </div>
                <div class="right">
                    <span class="shijian">14:20</span>
                </div>
            </div>
            <div class="a">
                <div class="left">
                    <img src="055620DCA9C6DBF6117EBCBFF8DAF775.jpg" class="tupian1">
                </div>
                <div class="center">
                    <span class="da">喜多郁代</span><br>
                    <span class="xiao">哪里来的哥布林</span>
                </div>
                <div class="right">
                    <span class="shijian">14:20</span>
                </div>
            </div>
            <div class="a">
                <div class="left">
                    <img src="055620DCA9C6DBF6117EBCBFF8DAF775.jpg" class="tupian1">
                </div>
                <div class="center">
                    <span class="da">喜多郁代</span><br>
                    <span class="xiao">我tm吃吃吃</span>
                </div>
                <div class="right">
                    <span class="shijian">14:20</span>
                </div>
            </div>
            <div class="a">
                <div class="left">
                    <img src="055620DCA9C6DBF6117EBCBFF8DAF775.jpg" class="tupian1">
                </div>
                <div class="center">
                    <span class="da">喜多郁代</span><br>
                    <span class="xiao">我tm吃吃吃</span>
                </div>
                <div class="right">
                    <span class="shijian">14:20</span>
                </div>
            </div>
            <div class="a">
                <div class="left">
                    <img src="055620DCA9C6DBF6117EBCBFF8DAF775.jpg" class="tupian1">
                </div>
                <div class="center">
                    <span class="da">喜多郁代</span><br>
                    <span class="xiao">这是什么，吃一口</span>
                </div>
                <div class="right">
                    <span class="shijian">14:20</span>
                </div>
            </div>
        </div>
        <div class="xia">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        
        
    </div>
</body>
</html>